Ext.require([
    'Ext.tab.*',
    'Ext.window.*',
    'Ext.tip.*',
    'Ext.data.*',
    'Ext.form.*',
    'Ext.layout.container.Border'
]);
Ext.onReady(function(){
    var win,
        button = Ext.get('button-1020-btnEl');

    button.on('click', function(){
    	Ext.define("Post", {
            extend: 'Ext.data.Model',
            proxy: {
                type: 'ajax',
                url : './customer-search.jsp',
                reader: {
                    root: 'topics',
                    totalProperty: 'totalCount'
                }
            },

            fields: [
				{name: 'makh', mapping: 'makh'},
				{name: 'tenkh', mapping: 'tenkh'},
				{name: 'dckh', mapping: 'dckh'},
            ]
        });

        ds = Ext.create('Ext.data.Store', {
            pageSize: 6,
            model: 'Post'
        });
        if (!win) {
            win = Ext.create('widget.window', {
                title: 'Tra thông tin khách hàng',
                closable: true,
                closeAction: 'hide',
                width: 600,
                height: 58,
                y: 100,
                resizable: false,
                layout: {
                    type: 'anchor',
                    padding: 5,
                },
                items: [{
                    xtype: 'combo',
                    store: ds,
                    displayField: 'makh',
                    typeAhead: false,
                    hideLabel: true,
                    hideTrigger:true,
                    anchor: '100%',
                    listConfig: {
                        loadingText: 'Đang tìm...',
                        emptyText: 'Không tìm thấy.',

                        // Custom rendering template for each item
                        getInnerTpl: function() {
                            return '<a class="search-item" href="http://kabiattacker.com/showthread.php?t={makh}&p={tenkh}">' +
                                '<h3><span>{makh} - </span>{tenkh} - ({dckh})</h3>' + '</a>';
                        }
                    },
                    pageSize: 10
                }, {
                    xtype: 'component',
                    //style: 'margin-top:10px',
                    //html: 'Live search requires a minimum of 4 characters.'
                }]
            });
        }
        button.dom.disabled = true;
        if (win.isVisible()) {
            win.hide(this, function() {
                button.dom.disabled = false;
            });
        } else {
            win.show(this, function() {
                button.dom.disabled = false;
            });
        }
    });
});